import React, { Component, PureComponent } from 'react';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import { RaisedButton } from 'material-ui';
import './style.css';

class LossTypeList extends PureComponent {
    render() {
        const { lossTypes, selectLossType, onSelectLosType } = this.props;
        return lossTypes.map(
            (lossType, index) => {
                if (selectLossType === lossType) {
                    return (
                        <p key={index} className="lossTypeRadio">
                            <input type="radio" name="lossType" value={lossType}
                                checked
                                onChange={() => onSelectLosType(lossType)} />
                            <label>{lossType}</label>
                        </p>
                    );
                } else {
                    return (
                        <p key={index} className="lossTypeRadio">
                            <input type="radio" name="lossType" value={lossType}
                                onChange={() => onSelectLosType(lossType)} />
                            <label>{lossType}</label>
                        </p>
                    );
                }
            }
        )
    }
}

class SubLossTypeList extends Component {
    render() {
        const { subLossTypes, onSelectSubLosType } = this.props;
        return subLossTypes.map(
            (subLossType, index) => (
                <p key={index} className="subLossTypeRadio">
                    <input type="radio" name="subLossType" value={subLossType}
                        onChange={() => onSelectSubLosType(subLossType)} />
                    <label>{subLossType}</label>
                </p>
            )
        )
    }
}

class LossDetail extends Component {
    render() {
        const { userInfo, lossTypes, subLossTypes, onLoad, selectLossType, selectSubLossType,
                fetching, onSelectLosType, onSelectSubLosType, onLodge } = this.props;
        return (
            <div>
                {
                    fetching ?
                        <h2 onLoad={onLoad()} style={{margin: '15%'}}>fetching data</h2> :

                        <div>
                            <h2>Loss detail</h2>
                            <div>
                                <div className="lossTypeLabel">Loss type:</div><br/>
                                <div className="lossTypeGroup" name="lossType">
                                    <LossTypeList lossTypes={lossTypes}
                                        selectLossType={selectLossType}
                                        onSelectLosType={onSelectLosType} />
                                </div>
                            </div>
                            {
                                subLossTypes &&
                                <div>
                                    <div className="subLossTypeLabel">SubLoss type:</div><br/>
                                    <div className="subLossTypeGroup" name="subLossType">
                                        <SubLossTypeList subLossTypes={subLossTypes}
                                        onSelectSubLosType={onSelectSubLosType}/>
                                    </div>
                                </div>
                            }
                            {
                                selectSubLossType &&
                                <RaisedButton type="button" className="lodge" label="lodge" primary={true}
                                    onClick={() => onLodge(userInfo, {"lossType": selectLossType, "subLossType": selectSubLossType})}/>
                            }
                        </div>
                }
            </div>
        )
    }
}

function fetchLossTypes() {
    return dispatch => {
        fetch('http://localhost:8080/backend/lossTypes', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(lossTypes => {
            dispatch({
                type: 'init-lossTypes',
                payload: lossTypes
            })
        })
    }
}

function fetchSubLossTypes(lossType) {
    return dispatch => {
        dispatch({ type: 'fetching', payload: true});
        fetch('http://localhost:8080/backend/subLossTypes?lossType=' + lossType, {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(subLossTypes => {
            dispatch({
                type: 'select-ossTypes',
                selectLossType: lossType,
                payload: subLossTypes
            })
        })
    }
}

function lodge(userInfo, lossDetail) {
    return dispatch => {
        dispatch({ type: 'fetching', payload: true});
        fetch('http://localhost:8080/backend/lodge', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({"userInfo": userInfo, "lossDetail": lossDetail})
        })
        .then(response => response.text())
        .then(claimNumber => {
            if (claimNumber) {
                dispatch({type: 'lodge-success', payload: claimNumber})
                dispatch(push('/confirmation'));
            } else {
                dispatch(push('/error'));
            }
        })
    }
}

const mapStateToProps = state => ({
  userInfo: state.macReducer.userInfo,
  lossTypes: state.lossDetailReducer.lossTypes,
  subLossTypes: state.lossDetailReducer.subLossTypes,
  selectLossType: state.lossDetailReducer.selectLossType,
  selectSubLossType: state.lossDetailReducer.selectSubLossType,
  fetching: state.lossDetailReducer.fetching
})

const mapDispatchToProps = (dispatch) => {
    return {
        onLoad: () => {
            dispatch(fetchLossTypes())
        },
        onSelectLosType: (lossType) => {
            dispatch(fetchSubLossTypes(lossType))
        },
        onSelectSubLosType: (subLossType) => {
            dispatch({
                type: 'select-subLossType',
                payload: subLossType
            })
        },
        onLodge: (userInfo, lossDetail)=> {
            dispatch(lodge(userInfo, lossDetail))
        }
    }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LossDetail)
